<template>
  <div
    :class="navClass"
    :style="navStyle">
    <div class="my-nav-bar__left" @click="onClickLeft">
      <slot name="left">
        <span v-if="leftText" class="my-nav-bar__text">{{leftText}}</span>
      </slot>
    </div>

    <div class="my-nav-bar__title my-ellipsis">
      <slot name="title">{{title}}</slot>
    </div>

    <div class="my-nav-bar__right" @click="onClickRight">
      <slot name="right">
        <span v-if="rightText" class="my-nav-bar__text">{{rightText}}</span>
      </slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'my-nav-bar',
  props: {
    title: {
      type: String,
      default: ''
    },
    fixed: {
      type: Boolean,
      default: false
    },
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    leftArrow: {
      type: Boolean,
      default: false
    },
    border: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    backgroundColor: {
      type: String,
      default: '#fff'
    }
  },

  computed: {
    navStyle() {
      let {zIndex, backgroundColor} = this
      let style = {
        backgroundColor: backgroundColor,
        zIndex: zIndex
      }
      return style
    },

    navClass() {
      let {fixed, border} = this
      let classes = [
        'my-nav-bar',
        fixed && 'my-nav-bar--fixed',
        border && 'my-hairline--bottom'
      ]
      return classes
    }
  },

  methods: {
    // 点击左边
    onClickLeft(event) {
      this.$emit('click-left', event)
    },

    // 点击右边
    onClickRight(event) {
      this.$emit('click-right', event)
    }
  }
}
</script>

<style lang="less">
  @import './nav-bar.less';
</style>

